<template>
  <div class="main">
    <div style="margin-top: 1.25rem; margin-bottom: 30px; font-weight: 600">
      <span style="font-size: 14px; color: #999">在线考试/</span
      ><span style="font-size: 14px; font-weight: 400; color: #666"
        >考试错题本</span
      >
    </div>
    <div class="banner">
      <div class="tit">考试错题本</div>
      <div class="btn-box">
        <div class="btn-all-play" @click="GetTestPaper()">随机练习</div>
        <!-- <div class="btn-all-play">
					全部练习
				</div> -->
      </div>
    </div>
    <div class="main_top">
      <div style="padding: 1.25rem">每日错题统计</div>
      <div id="main"></div>
    </div>
    <div class="main_top" style="margin-bottom: 1.25rem; min-height: 18.75rem">
      <div style="padding: 1.25rem">错题本</div>
      <!-- <div class="image-empty-item" style="text-align: center;">
				<img src="https://all.meedu.tech/img/img-placeholder.02168418.png" />
			</div> -->
      <!-- <div class="paper-item-comp" @click="$router.push('/ExamMain')">
				<div class="title">计算机四级模拟卷</div>

				<div class="info">
					<span>查看</span>
				</div>
			</div> -->
      <div
        style="margin-right: 1.25rem; display: flex; justify-content: flex-end"
      >
        错题知识点：
        <el-select
          v-model="knowledgeId"
          placeholder="请选择"
          @change="getWrongQuestionRecords()"
        >
          <el-option
            v-for="item in WrongQuestionKnowledge"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div style="margin-top: 1.875rem">
        <div
          style="padding: 1.25rem"
          v-for="(Item, idx) in QuestionRecords"
          :key="Item.id"
        >
          <div class="qsTit">
            <p>{{ `${idx + 1}.${Item.question.content}` }}</p>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              font-size: 14px;
              font-weight: 400;
              color: #999;
            "
          >
            <span v-for="(ite, index) in Item.knowledgeList" :key="index">{{
              ite.label
            }}</span
            ><span
              >{{ Item.testPaperName }}-<span
                v-for="(ite, inx) in Item.knowledgeList"
                :key="inx + 'hh'"
                >{{ ite.label }}</span
              ></span
            >
          </div>
          <el-divider></el-divider>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { PersonManager } from "../../request/personCenter.js";
import { HttpManager } from "../../request/Special.js";
import marked from "marked";
import { TestManager } from "../../request/test.js";
export default {
  data() {
    return {
      WrongQuestionKnowledge: [],
      knowledgeId: "",
      QuestionRecords: [],
      allnumber: "",
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      /*基于准备好的dom，初始化echarts实例*/
      const myChart = this.$echarts.init(document.getElementById("main"));
      /*数据*/
      TestManager.getDaysWrongQuestion().then((e) => {
        console.log(e);

        //日期
        const xData = e.data.data.days;
        //新增题目数量
        const zyData = e.data.data.totals;
        const  option = {
          xAxis: {
            type: "category",
            data: xData,
          },
          yAxis: {
            type: "value",
          },
         
		  legend: {
            data: ["新增"],
            icon: "circle",
            itemGap: 18,
            itemHeight: 7,
            textStyle: {
              fontSize: 12,
              color: "#999",
              padding: [0, 0, 0, -9],
            },
            top: 32,
            left: "right",
          },
          /*网格 grid
           *   left top right bottom 边界位置
           * */
          grid: {
            right: 10,
            left: 50,
            top: 70,
          },
          /*系列列表 series
           *   name 系列名,用于提示tooltip，图例legend 筛选，数据更新
           *   type 列表类型
           *   lineStyle 线的样式
           *       color 颜色
           *   showSymbol 标记点的显示
           *   smooth 线的圆滑
           *   data 数据
           * */
          series: [
            {
              name: "新增",
              type: "line",
              lineStyle: {
                color: "lightseagreen",
              },
              showSymbol: false,
              smooth: true,
              data: zyData,
            },
          ],
        };
        myChart.setOption(option);
      });
    },

    //获取错题记录
    getWrongQuestionRecords(label) {
      if (this.knowledgeId == "no") {
        var parmas = {
          currentPage: 1,
          pageSize: 100,
        };
      } else {
        var parmas = {
          currentPage: 1,
          pageSize: 100,
          knowledgeId: this.knowledgeId,
        };
      }

      TestManager.getWrongQuestionRecords(this.qs.stringify(parmas)).then(
        (e) => {
          console.log(e.data.data.dataList);
          this.QuestionRecords = e.data.data.dataList;
          // this.isActive = label;
          if (this.knowledgeId == "no") {
            this.allnumber = this.QuestionRecords.length;
          }
        }
      );
    },
    md(content) {
      return marked(content);
    },
    //获取错题的知识点
    getWrongQuestionKnowledge() {
      TestManager.getWrongQuestionKnowledge().then((e) => {
        console.log(e);
        this.WrongQuestionKnowledge = e.data.data;
      });
    },
    GetTestPaper() {
      var getmu = [];
      for (let i = 0; i < this.WrongQuestionKnowledge.length; i++) {
        getmu.push(this.WrongQuestionKnowledge[i].value);
      }
      var parmas = {
        difficulty: 2,
        knowledgePoints: getmu,
        onlyError: 1,
        onlyNew: 0,
        onlyNewAndError: 0,
		paperName: "错题练习",
        quantity: {
          fills: 0,
          judge: 3,
          multiple: 3,
          shortAnswer: 0,
          single: 4,
          total: 10,
        },
        scope: 0,
        timeLimit: 5 * 10,
      };
      TestManager.generatePaperForEducation(parmas).then((e) => {
        console.log(e);
        var k = e.data.data;
        window.localStorage.setItem("testPaperId", k.id);
        this.$router.push("/specialtest");
      });
    },
  },
  created() {
    this.getWrongQuestionKnowledge();
    this.getWrongQuestionRecords("no");
  },
};
</script>

<style scoped="scoped">
.main {
  height: 100vh;
  width: 86%;
  margin-right: 7%;
  margin-left: 7%;
}

#main {
  /* margin: 20px; */
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  height: 500px;
}

.banner {
  width: 100%;
  margin: 0 auto;
  height: 198px;
  background: linear-gradient(315deg, #ff7474, #ff4040);
  box-shadow: 0 4px 8px 0 hsl(0deg 0% 40% / 10%);
  border-radius: 8px;
  margin-bottom: 30px;
  padding-top: 50px;
  box-sizing: border-box;
}

.tit {
  width: 100%;
  height: 28px;
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #fff;
  line-height: 28px;
  text-align: center;
  margin-bottom: 50px;
}

.btn-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.day-play {
  width: 104px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid hsl(0, 0%, 100%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  margin-right: 50px;
}

.btn-all-play {
  width: 104px;
  height: 40px;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: #ff5068;
}

.main_top {
  margin-top: 1.25rem;
  background-color: white;
  /* height: 18.75rem; */
  border-radius: 8px;
}

.image-empty-item img {
  width: 200px;
  height: 200px;
}

.paper-item-comp {
  width: 100%;
  height: 116px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  padding-left: 30px;
  padding-right: 50px;
  margin-bottom: 30px;
  border-bottom: 1px solid #f4f4f4;
}

/* .paper-item-comp:hover{
		 box-shadow: 0 2px 3px -1px #ececec;
	 } */

.title {
  height: 16px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333;
  line-height: 16px;
}

.info {
  height: 30px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  /* // font-weight: 600;
		// color: #000000; */
  color: #666;
  line-height: 30px;
}
.qsTit {
  width: 100%;
  margin-bottom: 30px;
}
</style>
